<template>
	<view style="height: 100%;">
		<nav-bar :title="title" :autoBack="true"></nav-bar>
		<u--textarea v-model="textIn" placeholder="请输入内容"></u--textarea>
		<view style="display: flex;flex-direction: row;">

			<view style="display: flex;flex-direction: row;flex-grow: 1;">

				<view class="select-card text-card" style="">
					<text>文本</text>
				</view>
				<view class="select-card img-card" style="">
					<text>图片</text>
				</view>
			</view>

			<view style="display: flex;align-items: center;">

				<u-button type="primary" text="生成"></u-button>
			</view>

		</view>
		<uni-card :is-shadow="false" is-full style="margin-top: 16px;">
			<u--text :text="textOut"></u--text>
		</uni-card>
		<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		<u-button @click="getSignWords()">获取字符画</u-button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: '符号字',
				textIn: '',
				textOut: 'test',
			}
		},
		onReady() {
			let ctx = uni.createCanvasContext('firstCanvas')
			ctx.font = "16px serif";
			ctx.fillText('你好', 0, 20)
			const metrics = ctx.measureText('你好')
			// console.log(metrics.width)
			// let imgData=ctx.getImageData(0,0,200,200)
			// console.log(ctx)
			ctx.draw()
		},
		methods: {
			async getRgb(x, y) {
				// 根据像素获取rgb
				let promise = new Promise((resolve, reject) => {
					uni.canvasGetImageData({
						canvasId: 'firstCanvas',
						x,
						y,
						width: 35,
						height: 40,
						success(res) {
							// console.log(res.width) // 100
							// console.log(res.height) // 100
							// console.log(res.data instanceof Uint8ClampedArray) // true
							// console.log(res.data.length) // 100 * 100 * 4
							let [r, g, b] = res.data
							console.log(res.data)
							
							if(g>0){
								console.log(g)
							}
							resolve([r, g, b])
							// console.log(res.data)
						}
					})
				})
				return promise

			},
			async getSignWords() {
				let height = 40,
					width = 35
				let html = ''
				await this.getRgb(0,0)
				return
				for (let i = 0; i < height; i++) {
					// 遍历行
					html+=`<div>`
					for(let j=0;j<width;j++){
						// 遍历列
						html += `<span style="color: rgb(${r}, ${g}, ${b})">0</span><span style="color: rgb(${r}, ${g}, ${b})">0</span>`
						let [r, g, b] = await this.getRgb(j,i)
						// console.log(r)
						// console.log(g)
						// console.log(b)
					}
					html+=`</div>`
				}

				// console.log(rgb)
				// console.log('test')
			}
		},

	}
</script>

<style scoped>
	.select-card {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 80px;
		color: #fff;
	}

	.text-card {
		background-color: #8cde9b;
		border-radius: 16px 0 0 16px;
		border: solid 1px #8cde9b;
	}

	.img-card {
		background-color: #f9d39f;
		border-radius: 0 16px 16px 0px;
		border: solid 1px #f9d39f;
	}

	.active {}
</style>